<template>
  <div class="edit">
    <h2>新增租赁信息</h2>
    <div class="editbox">
      <p>
        <span>房屋号</span>
        <span>
          <select name="" id="" v-model="vNo">
            <option v-for="(item, index) in selarr" :key="index">
              {{ item }}
            </option>
          </select>
        </span>
      </p>
      <p>
        <span>月租费用</span
        ><span><input type="text" v-model.number="vprice" /></span>
      </p>
      <p>
        <span>租赁人</span><span><input type="text" v-model="vuser" /></span>
      </p>
      <p>
        <span>联系电话</span
        ><span><input type="Number" v-model="vphone" /></span>
      </p>
      <p>
        <span>用水量(吨)</span
        ><span><input type="Number" v-model.number="vwater" /></span>
      </p>
      <p>
        <span>单价(元)</span
        ><span><input type="text" v-model.number="vwaterprice" /></span>
      </p>
      <p>
        <span>水费(元)</span> <span>{{ this.vwaterprice * this.vwater }}</span>
      </p>
      <p>
        <span>电表初始读数</span
        ><span><input type="text" v-model.number="vpowerstart" /></span>
      </p>
      <p>
        <span>电表月底读数</span
        ><span><input type="text" v-model.number="vpowerend" /></span>
      </p>
      <p>
        <span>用电量(度)</span
        ><span> {{ this.vpowerend - this.vpowerstart }} </span>
      </p>
      <p>
        <span>电费单价</span
        ><span><input type="text" v-model.number="vpowerprice" /></span>
      </p>
      <p>
        <span>电费(元)</span
        ><span>{{ (this.vpowerend - this.vpowerstart) * vpowerprice }}</span>
      </p>
      <p>
        <span>租赁面积(平米)</span
        ><span><input type="text" v-model.number="varea" /></span>
      </p>
      <p>
        <span>单价(平米)</span
        ><span><input type="text" v-model.number="vareaprice" /></span>
      </p>
      <p>
        <span>物业费(元)</span><span>{{ this.varea * this.vareaprice }}</span>
      </p>
      <p>
        <span>租金合计(元)</span
        ><span>
          {{
            (
              this.vprice +
              this.vwaterprice * this.vwater +
              (this.vpowerend - this.vpowerstart) * this.vpowerprice +
              this.varea * this.vareaprice
            ).toFixed(2)
          }}
        </span>
      </p>
      <p>
        <button class="btn" @click="save">保存</button>
      </p>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      selarr: [
        "A栋-1101",
        "A栋-1102",
        "A栋-1103",
        "A栋-1104",
        "A栋-1105",
        "A栋-1106",
      ],
      vNo: "",
      vprice: 0,
      vuser: "",
      vphone: "",
      vwater: 0,
      vwaterprice: 0,
      vpowerstart: 0,
      vpowerend: 0,
      vpowerprice: 0,
      varea: 0,
      vareaprice: 0,
    };
  },
  methods: {
    ...mapMutations(["add"]),
    save() {
      this.add({
        No: this.vNo,
        price: this.vprice,
        user: this.vuser,
        phone: this.vphone,
        water: this.vwater,
        waterprice: this.vwaterprice,
        powerstart: this.vpowerstart,
        powerend: this.vpowerend,
        powerprice: this.vpowerprice,
        area: this.varea,
        areaprice: this.vareaprice,
      });
      if (this.vphone == "") {
        alert("手机号输入错误");
        return;
      }
      this.$router.push("/home/list");
    },
  },
};
</script> 

<style lang="less" scoped>
.edit {
  padding: 10px;
  h2 {
    background-color: #545c64;
    color: #fff;
    line-height: 60px;
    text-align: center;
  }
  .editbox {
    margin-top: 10px;
    border: 1px solid gray;
    p {
      text-align: center;
      line-height: 35px;
      width: 100%;
      span {
        display: inline-block;

        &:nth-of-type(1) {
          width: 100px;
          text-align: right;
          padding-right: 15px;
        }
        &:nth-of-type(2) {
          width: 200px;
          text-align: left;
        }
        &:nth-of-type(3) {
          width: 200px;
          text-align: left;
        }
      }
      input,
      select {
        width: 200px;
      }
      .btn {
        width: 100px;
        line-height: 30px;
        margin-left: 10px;
      }
    }
  }
}
</style>